<!DOCTYPE html>
<script>
let video;
function canplaythrough() {
    parent.postMessage("Video loaded", "*");
}

function fullscreenChanged() {
    parent.postMessage("SUCCEED - entered full screen!", "*");
    video.requestVideoFrameCallback(framePainted);
}

function framePainted() {
    parent.postMessage("Video frame painted.", "*");
}

onload = function() {
    video = document.getElementById('video');
    var mediaFile = "../../media/content/test.ogv";
    video.src = mediaFile;
    video.addEventListener('canplaythrough', canplaythrough);
    video.addEventListener('webkitfullscreenchange', fullscreenChanged);
    video.onclick = function(event) {
        video.webkitRequestFullscreen();
        // cancel the activation behavior (click to play/pause)
        event.preventDefault();
    };
}
</script>
<video id="video" width="320" height="240"></video>
